<template>
    <div class="choice-company">
        <input v-model="choiceObj.label" placeholder="请点击选择" readonly="readonly" class="input" @focus="focus"/>
        <dialogs
        :visible="visible"
        :title="title"
        width="600px"
        @confirm="confirm"
        >
            <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getList"></search-form>
            <elTable :formData="formData" @getList="getList" :highlight="true" @selection-change="selectChange">
                <el-table-column prop="name" label="公司名称" ></el-table-column>
                <el-table-column prop="statusMessage" label="公司状态" ></el-table-column>
                <el-table-column prop="contacts" label="联系人" ></el-table-column>
                <el-table-column prop="createTime" label="创建时间" >
                    <template slot-scope="scope">
                        {{scope.row.createTime && $normalTime(scope.row.createTime)}}
                    </template>
                </el-table-column>
            </elTable>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'choiceCompany',
    components: {
        elTable
    },
    props: {
        shopType: {
            type: Number,
            default () {
                return 0
            }  
        },
        choiceObj: {
            type: Object,
            default () {
                return {
                    label: '',
                    value: ''
                }
            }
        },
        mode: {
            event: 'input',
            prop: 'value'
        },
        title: {
            type: String,
            default () {
                return '选择公司'
            }
        }
    },
    data () {
        return {
            searchObj: {
                name: ''
            },
            formData: {
                currentPage: 1,
                pageSize: 5,
                total: 0,
                data: []
            },
            searchArray: [
                {
                    type: 'input',
                    value: '',
                    label: '公司名称',
                    placeholder: '请输入公司名称',
                    key: 'name'
                }
            ],
            visible: {
                show: false
            },
            currentItem: {}
        }
    },
    methods: {
        confirm () {
            if (!this.currentItem.id) {
                this.$message.error('请选择公司')
                return
            }
            this.choiceObj.value = this.currentItem.id
            this.choiceObj.label = this.currentItem.name
            this.visible.show = false
            this.currentItem = {}
            this.$emit('getCompany', this.choiceObj)
        },
        selectChange (val) {
            this.currentItem = val
        },
        focus () {
            this.getList()
            this.visible.show = true
        },
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {searchObj, formData: {currentPage, pageSize}} = this
            this.$loading(true)
            let param = {}
            param = {
                currentPage,
                pageSize,
                shopType: this.shopType,
                status: 2
            }
            for (let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.userManage.getCompanyList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data && r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
    },
    watch: {
        'visible.show' (val) {
            if (!val) {
                this.currentItem = {}
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.choice-company {
    display: inline-block;
    .input {
        cursor: pointer;
    }
}
</style>